Like other languages present in Computer Science, CSS also follow a set of rules which is known as CSS syntax. The CSS syntax specifies how the style code should be written in order to give the proper result. CSS Syntax is divided into 3 parts:
- Selector
- Property
- Value
selector { property : value ; }
Selector
Selector define the HTML tag to which we want to style. Generally, we use the HTML tag to select the element for styling but we can also use the element class and id attribute to select.
Example
h1 { color: blue; }
here selector is h1, and it will select all the h1 tags present in the HTML document and colour all to blue.
Property
The property signifies what changes we want to apply on the element. If we want to change the colour then we need to specify the color property, if we want to change the font then we need to specify the font-family property, and similar to this we have many other properties present in CSS.
Example
h1 { color: blue; }
In the color is a property used to change the colour of the element <h1>.
Value
The value specifies the value for the property.
Example
h1 { color: blue; }
In the example blue is the value assigned to the color property.
Note : In CSS we use colon (:) to assign a value to a property. We can have multiple property for a signal element so we need to terminate every property with semicolon (;).
Type of Selectors
As we have discussed above selectors specify the elements which we want to style. CSS provide us different methods which helps us to select a group of elements or a specific element from a group.
- Tag Selector
- Universal Selector
- Descendant Selector
- The Class Selector
- ID selector
- Child Selector
- Attribute Selector
- Group Selector
Tag Selector In tag selector we directly use the tag name to select the HTML element.
Example
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
p {
color:red;
font-family: arial;
}
</style>
</head>
<body>
<h1> First Heading <h1>
<p> First Paragraph</p>
<p> Second Paragraph</p>
</body>
</html>
This will only style all the <p> elements present in the HTML document.
Universal Selector
The universal selector is used when we want to apply some styling to all the elements present in the HTML documents. To select all the elements at once we use this universal selector (*).
Example
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
* {
color:red;
font-family: arial;
}
</style>
</head>
<body>
<h1>First Heading</h1>
<p> First Paragraph</p>
<p> Second Paragraph</p>
</body>
</html>
The Descendant Selector
If we want to style a specific element which is present as a nested element to an element then we use the Descendant Selector syntax. For instance, if we want to style only those <li> which are nested under <ul>.
Example
<!DOCTYPE html>
<html>
<head>
<title></title>
<style >
ul li {
color:red;
font-family: arial;
}
</style>
</head>
<body>
<p>Unordered List</p>
<ul>
<li>First</li>
<li>Second</li>
</ul>
<p>Ordered List</p>
<ol>
<li>First</li>
<li>Second</li>
</ol>
</body>
</html>
Here the styling will be applied on the <li> which are present under <ul>. The styling will not be applied on the <li> which are under <ol>.
Class Selector
Class is an HTML attribute that is specified to the HTML elements . With the help of a class name we can select a group of specific elements which a similar styling. To select an element with its class name we use the (.) dot symbol followed by the element class name.
Syntax
.class_name { property: value}
Example
<!DOCTYPE html>
<html>
<head>
<title></title>
<style >
.sam{
color:red;
font-family: arial;
}
.will{
color:green;
font-family: monospace;
}
</style>
</head>
<body>
<p class="sam"> Hi! </p>
<p class="will"> Hi! there </p>
<p class="sam"> how are you</p>
<p class="will"> Fine you tell.</p>
</body>
</html>
ID selector
ID selector is used when we want to style a specific element. To select an HTML element with its ID name we use the hash (#) symbol followed by the Id name.
Example
<!DOCTYPE html>
<html>
<head>
<title></title>
<style >
#one{
color:red;
font-family: arial;
}
</style>
</head>
<body>
<p id="one"> First </p>
</body>
</html>
The Child Selector
The child selector seen similar to the descendant selector but it has a different functionality. The child selector is used when we want to style only those elements which are the direct child of an element.
Example
<style >
body > p {
color:red;
font-family: arial;
}
</style>
This styling will only be applied on those <p> elements which are direct child of <body> element. If a <p> element present inside a <div> or other element then this styling will not affect it.
Attribute Selector
We can also select an element using its attribute value, for example if we want to select a input element which has a text value then we can do this.
Example
<!DOCTYPE html>
<html>
<head>
<title></title>
<style >
input[type="text"]{
color:red;
font-family: arial;
}
</style>
</head>
<body>
<form>
<input type="text">
</form>
</body>
</html>
Group Selector
If we want to specify the same styling for multiple elements then we can simply use the group selectors instead of wring the same sting for different elements.
Syntax
selector1, selector2, selector3
{
declaration box
};
Example
<style >
p, h1, h2, #sam{
color:red;
font-family: arial;
}
</style>
CSS Quick Summary
- The CSS components are divided into 3 categories selector, property and value.
- To assign a value to a property we use the : symbol.
- Every property value pair should be terminated with ; symbol.
- We can either use the tag name, class name, or id name to select the element.
- Properties and values are case sensitive.